<template>
	<view class="content">
		<!--签约主体信息-->
		<view class="content_2">
			<!-- 城市列表 -->
			<picker class="sign_detail" @change="pickerChooseArray($event, 'city_id', 'cityList', 'areaId')" :value="data.city_id" :range="cityList"
			 range-key="areaName">
				<view class="detail_title" style="width: 660upx;" >{{cityList[data.city_id].areaName}}</view>
				<image class="detail_icon" src="../../../../../../static/index/detail/sign/jiantou.svg"></image>
			</picker>
			<!-- 地区列表 -->
			<picker class="sign_detail" @change="pickerChooseArray($event, 'area_id', 'classifyList', 'areaId')" :value="data.area_id" :range="classifyList"
			 range-key="areaName">
				<view class="detail_title" style="width: 660upx;">{{classifyList[data.area_id].areaName}}</view>
				<image class="detail_icon" src="../../../../../../static/index/detail/sign/jiantou.svg"></image>
			</picker>
			<!-- 热点列表 -->
			<picker class="sign_detail" @change="pickerChooseArray($event, 'hot_id', 'hotList')" :value="data.hot_id" :range="hotList" range-key="describes">
				<view class="detail_title" style="width: 660upx;">{{hotList[data.hot_id].describes}}</view>
				<image class="detail_icon" src="../../../../../../static/index/detail/sign/jiantou.svg"></image>
			</picker>
			<view class="sign_detail">
				<view class="detail_title">名称</view>
				<input class="detail_info" placeholder="请输入房源名称"  @input="GetUserInput($event, 'inputname')" :value="inputname"></input>
			</view>
			<view class="sign_detail" @click="chooseLocation">
				<view class="detail_title">地址</view>
				<view class="detail_info"  style="direction: rtl;">{{getaddress}}</view>
				<!-- <input class="detail_info" placeholder="请输入地址"  @input="getAddressInput" disabled="true"></input> -->
			</view>
			<view class="sign_detail">
				<view class="detail_title">联系人</view>
				<input class="detail_info" placeholder="请输入联系人"  @input="GetUserInput($event, 'inputowner')" :value="inputowner"></input>
			</view>
			<view class="sign_detail">
				<view class="detail_title">手机号码</view>
				<input class="detail_info" placeholder="请输入手机号码"  type="number" @input="GetUserInput($event, 'inputphone')" :value="inputphone"></input>
			</view>
			<view class="sign_detail">
				<view class="detail_title">户型</view>
				<input class="detail_info" placeholder="如: X室X厅X卫"  @input="GetUserInput($event, 'inputroomtype')" :value="inputroomtype"></input>
			</view>
			<view class="sign_detail">
				<view class="detail_title">建面</view>
				<input class="detail_info" placeholder="请输入建筑面积"  @input="GetUserInput($event, 'inputarea')" :value="inputarea"></input>
			</view>
			<view class="sign_detail">
				<view class="detail_title">楼层</view>
				<input class="detail_info" placeholder="请输楼层"  @input="GetUserInput($event, 'inputfloor')" :value="inputfloor"></input>
			</view>
			<view class="sign_detail">
				<view class="detail_title">朝向</view>
				<input class="detail_info" placeholder="请输房间朝向"  @input="GetUserInput($event, 'inputdirection')" :value="inputdirection"></input>
			</view>
			<!-- 出租类型 -->
			<picker class="sign_detail" @change="pickerChooseArray($event, 'renttype_id', 'renttypeList')" :value="data.renttype_id" :range="renttypeList"
			 range-key="describes">
				<view class="detail_title" style="width: 660upx;">{{renttypeList[data.renttype_id].describes}}</view>
				<image class="detail_icon" src="../../../../../../static/index/detail/sign/jiantou.svg"></image>
			</picker>
			<!-- 最低租期 -->
			<picker class="sign_detail" @change="pickerChooseArray($event, 'rentday_id', 'renttimeList')" :value="data.rentday_id" :range="renttimeList"
			 range-key="describes">
				<view class="detail_title" style="width: 660upx;">{{renttimeList[data.rentday_id].describes}}</view>
				<image class="detail_icon" src="../../../../../../static/index/detail/sign/jiantou.svg"></image>
			</picker>
			<!-- 扣租方式 -->
			<picker class="sign_detail" @change="pickerChooseArray($event, 'way_id', 'rentmoneyList')" :value="data.way_id" :range="rentmoneyList"
			 range-key="describes">
				<view class="detail_title" style="width: 660upx;">{{rentmoneyList[data.way_id].describes}}</view>
				<image class="detail_icon" src="../../../../../../static/index/detail/sign/jiantou.svg"></image>
			</picker>
			<!-- 押金类型 -->
			<picker class="sign_detail" @change="pickerChooseArray($event, 'mortgage_id', 'deposittypeList')" :value="data.mortgage_id" :range="deposittypeList"
			 range-key="describes">
				<view class="detail_title" style="width: 660upx;">{{deposittypeList[data.mortgage_id].describes}}</view>
				<image class="detail_icon" src="../../../../../../static/index/detail/sign/jiantou.svg"></image>
			</picker>
			<view class="sign_detail">
				<view class="detail_title">押金</view>
				<input class="detail_info" placeholder="请输押金"  type="number" @input="GetUserInput($event, 'inputrentmoney')" :value="inputrentmoney"></input>
			</view>
			<view class="sign_detail">
				<view class="detail_title">每月房租</view>
				<input class="detail_info" placeholder="请输每月房租"  type="number" @input="GetUserInput($event, 'inputmoney')" :value="inputmoney"></input>
			</view>
		</view>
		<!--配套措施-->
		<view class="content_10">
			<view class="title_10">配套措施</view>
			<view class="line_title"></view>
			<view class="equipment_view">
				<block v-for="(equipment, index_equipment) in house_detail_equipment" :key='index_equipment'>
					<view class="equipment_box" @click="chooseEquip(index_equipment)">
						<image class="equipment_img" :src="equipment.image"></image>
						<view class="equipment_name">{{equipment.show_name}}</view>
						<view class="equipment_choose" v-if="equipment.state == 1"></view>
						<!-- <view :class="{equipment_choose: xiao_arr.indexOf(equipment.photo_id) != -1}" ></view> -->
					</view>
				</block>
			</view>
		</view>
		<block v-for="(sign, index) in labelList" :key='index'>
			<view class="sign_detail">
				<view class="detail_title">房屋特色（低于5个字）</view>
				<input class="detail_info" maxlength="5" placeholder="请输房屋特色"  @input="signInput($event, index)" :value="sign.show_name"></input>
			</view>
		</block>

		<!-- <view class="sign_detail" v-if="addspecial >= 2">
			<view class="detail_title">房屋特色（低于5个字）</view>
			<input class="detail_info" maxlength="5" placeholder="请输房屋特色"  @input="getSpecial_2Input" :value="getSpecial_2Value"></input>
		</view>
		<view class="sign_detail" v-if="addspecial >= 3">
			<view class="detail_title">房屋特色（低于5个字）</view>
			<input class="detail_info" maxlength="5" placeholder="请输房屋特色"  @input="getSpecial_3Input" :value="getSpecial_3Value"></input>
		</view>
		<view class="sign_detail" v-if="addspecial >= 4">
			<view class="detail_title">房屋特色（低于5个字）</view>
			<input class="detail_info" maxlength="5" placeholder="请输房屋特色"  @input="getSpecial_4Input" :value="getSpecial_4Value"></input>
		</view>
		<view class="sign_detail" v-if="addspecial >= 5">
			<view class="detail_title">房屋特色（低于5个字）</view>
			<input class="detail_info" maxlength="5" placeholder="请输房屋特色"  type="number" @input="getSpecial_5Input" :value="getSpecial_5Value"></input>
		</view> -->
		<!--添加房屋特色-->
		<view class="content_4">
			<view class="add_4" @click="addSpecial">添加</view>
		</view>
		<!--下一步-->
		<view class="content_5">
			<view class="back" @click="back">返回</view>
			<view class="save" @click="toCreat">保存</view>
		</view>
	</view>
</template>

<script>
	//导入接口请求文件
	import {
		Request
	} from '../../../../../../utils/request.js';
	//定义getApp对象
	const app = getApp();
	export default {
		data() {
			return {
				equipId: '0',
				equipShow: '0',
				addspecial: '1',
				equipList: [],
				data: {
					//城市id
					city_id: 0,
					area_id: 0,
					//热点标签
					hot_id: 0,
					housetype: 0,
					//出租类型
					renttype_id: 0,
					//最低租期
					rentday_id: 0,
					//扣租方式
					way_id: 0,
					//押金类型
					mortgage_id: 0,
				},
				//定义picker组件range数组名称
				//城市数组列表
				cityList: [],
				classifyList: [{
						id: '1',
						areaName: '区域'
					},
					{
						id: '2',
						areaName: '请选择城市'
					},
					{
						id: '3',
						areaName: '请选择城市'
					},
					{
						id: '4',
						areaName: '请选择城市'
					}
				],
				hotList: [],
				renttypeList: [],
				renttimeList: [],
				rentmoneyList: [],
				deposittypeList: [],
				house_detail_equipment: [],
				readstate: '0',
				badroomList: [],
				housedetailList: [],
				house_label: [],
				state: '0',
				state_index: '',
				//效验措施设备数组
				xiao_arr: Array(),
				getaddress: '请选择地址',
				latitude: '',
				longitude: '',
				//编辑房源名称
				inputname:'',
				//房源联系人
				'inputowner':'',
				//房源联系电话
				'inputphone':'',
				//房源户型
				'inputroomtype':'',
				//房源建面
				'inputarea':'',
				//房源楼层
				'inputfloor':'',
				//房源朝向
				'inputdirection':'',
				//房源押金
				'inputrentmoney':'',
				//房源每月房租
				'inputmoney':'',
				//特色标签数组
				labelList: [],
				//特色标签1
				getSpecial_Value0: '',
				getSpecial_Value1: '',
				getSpecial_Value2: '',
				getSpecial_Value3: '',
				getSpecial_Value4: '',
				
				getSpecial_1Value: '',
				getSpecial_2Value: '',
				getSpecial_3Value: '',
				getSpecial_4Value: '',
				getSpecial_5Value: '',

			}
		},
		methods: {
			//选择配套设施
			chooseEquip: function(index) {
				this.state_index = index
				let that = this
				// this.arr = new Array();
				this.equipment = {
					'photo_id': this.house_detail_equipment[index].id,
					'show_name': this.house_detail_equipment[index].show_name,
					'system_url': this.house_detail_equipment[index].system_url,
				}
				//效验数组下标
				let xiao_arr_index = this.xiao_arr.indexOf(this.equipment.photo_id);
				if (xiao_arr_index == -1) {
					//效验数组
					this.xiao_arr.push(this.equipment.photo_id);
					//压入措施设备栈
					that.equipList.push(this.equipment)
					this.state = '1'
					//判断css样式
					this.house_detail_equipment[index].state = 1;
				} else if (this.xiao_arr.length != 0) {
					this.house_detail_equipment[index].state = -1;
					for (let i = 0, l = that.equipList.length; i < l; i++) {
						if (this.xiao_arr[xiao_arr_index] == that.equipList[i].photo_id) {
							that.equipList.splice(i, 1);
							console.log(that.equipList)
							break;
						}
					}
					//删除效验数组键值
					this.xiao_arr.splice(xiao_arr_index, 1);
					this.state = '0'
				}
				console.log(this.equipList);
			},
			//添加房屋特色 最多只能添加5个房屋特色
			addSpecial: function() {
				if (this.labelList.length >= 5) {
					new Request().showToast('最多只能添加5个房屋特色');
					return;
				}
				//定义标签数据类型
				let label = {
					'show_name': '',
				}
				//压入标签数组
				this.labelList.push(label);
			},
			//打开地图选择位置
			chooseLocation: function() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.getaddress = res.address
						this.latitude = res.latitude
						this.longitude = res.longitude
					}
				})
			},
			/**
			 * picker组件选择列表
			 * event: 事件
			 * valueString: picker组件属性
			 * arrayList: 定义picker数组
			 * pickerId: picker组件的数组id
			 */
			pickerChooseArray: function(event, valueString, arrayList, pickerId = 'id'){
				//picker选中下标值
				let pickerIndex = event.target.value;
				//赋值给当前选中picker组件下标值
				this.data[valueString] = pickerIndex;
				//赋值给当前picker组件属性的值，当前值需要提交给创建房源接口的参数
				this[valueString] = this[arrayList][pickerIndex][pickerId];
				//判断picker属性 如果选择的是城市，则加载更新地区列表值
				if(valueString == 'city_id'){
					//调用获取地区列表值
					this.pickerChangeCity();
				}
				console.log(this[valueString])
			},
			//城市选择改变区域picker组件列表值
			pickerChangeCity: function() {
				//获取区域
				new Request('landboos/Create_House/GetCityList').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							city: this.city_id
						}
					},
					(res) => {
						console.log(res)
						this.classifyList = res.data.data
					}
				)
			},
			//监听用户输入信息
			GetUserInput: function(event, inputName){
				this[inputName] = event.detail.value;
			},
			//监听特色标签输入
			signInput:function(event, index){
				this.labelList[index].show_name = event.detail.value;
			},
			//保存创建房子
			toCreat: function() {
				console.log(this.city_id)

				let phone = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/
				//判断用户是否有输入完整信息
				let inputArrayConfig = [
					{
						'InputName': 'inputname',
						'InputTips': '请输入房源名称',
					},
					{
						'InputName': 'latitude',
						'InputTips': '请选择地址',
					},
					{
						'InputName': 'inputowner',
						'InputTips': '请输入联系人',
					},
					{
						'InputName': 'inputphone',
						'InputTips': '请正确输入手机号码',
					},
					{
						'InputName': 'inputroomtype',
						'InputTips': '请输入户型',
					},
					{
						'InputName': 'inputarea',
						'InputTips': '请输入建面',
					},
					{
						'InputName': 'inputfloor',
						'InputTips': '请输入楼层',
					},
					{
						'InputName': 'inputdirection',
						'InputTips': '请输入朝向',
					},
					{
						'InputName': 'inputrentmoney',
						'InputTips': '请输入押金',
					},
					{
						'InputName': 'inputmoney',
						'InputTips': '请输入每月房租',
					},
					{
						'InputName': 'house_label',
						'InputTips': '请输入标签信息',
					}
				];
				for(let i=0,l=inputArrayConfig.length; i < l; i++){
					//输入框属性
					let InputName = inputArrayConfig[i].InputName;
					//判断如果为空,开启提示语
					if(this[InputName] == '' || this[InputName] == undefined){
						let InputTips = inputArrayConfig[i].InputTips;
						new Request().showToast(InputTips);
						return;
						break;
					}
				}
				//判断用户是否有输入特色标签信息
				//重新初始值
				this.house_label = [];
				for(let i=0,l=this.labelList.length; i < l; i++){
					//定义标签数组
					let labelArray = this.labelList;
					//判断添加标签了是否有输入内容
					if(labelArray[i].show_name == '' || labelArray[i].show_name == undefined){
						let tips = '请输入第' + (i+1) + '标签内容';
						new Request().showToast(tips);
						//清除压入标签数组，返回初始值
						this.house_label = labelArray.map(obj => {return obj.show_name});
						return;
						break;
					}else{
						//压入特色标签，传入请求创建房源接口
						let lableName = {'show_name':labelArray[i].show_name};
						this.house_label.push(lableName);
					}
				}
				
				
				
				//判断更改城市列表的时候是否也更新地区picker组件选择
				let new_arr = this.classifyList.map(obj => {return obj.areaId});
				if(new_arr.indexOf(this.area_id) == -1){
					new Request().showToast('请更改房源所在地区');
					return;
				}
				
				if (this.inputphone == '' || this.inputphone == undefined || !phone.test(this.inputphone)) {
					new Request().showToast('请正确输入手机号码');
					return;
				}
				uni.request({
					url: 'https://api.yihua.pub/api/renthouse/landboos/Edith_Update_House/UpdateHouse',
					method: 'POST',
					data: {
						openid: app.globalData.openid,
						house_id: this.house_id,
						city: this.city_id,
						area: this.area_id,
						hot: this.hot_id,
						house_name: this.inputname,
						house_addr: this.getaddress,
						user_name: this.inputowner,
						user_phone: this.inputphone,
						house_type: this.inputroomtype,
						house_area: this.inputarea,
						house_floor: this.inputfloor,
						house_direction: this.inputdirection,
						deposit_money: this.inputrentmoney,
						house_money: this.inputmoney,
						house_renttype: this.renttype_id,
						house_rentmoney: this.rentday_id,
						house_way: this.way_id,
						house_mortgage: this.mortgage_id,
						house_photo: this.photo_arr,
						house_label: this.house_label,
						equipment: this.equipList,
						latitude: this.latitude,
						longitude: this.longitude, 
					},
					success: (res) => {
						if(res.data.code == 0){
							new Request().showToast(res.data.msg);
							return;
						}
						if(res.data.code == 1){
							new Request().showToast('创建成功');
							uni.navigateBack({
								delta: 3
							});
						}
					
					}
				})
			},
			//返回
			back: function() {
				uni.navigateBack({
					delta: 1
				})
			},
			/**
			 * @param {Object} 
			 * arrayList: 需要读取的数组
			 * arrayValue: 需要查找的值
			 * arrayColumn: 需要获取某一列数组
			 * choosePicker: picker组件值
			 * 返回当前值所在数组的下标
			 */
			GetArrayIndex: function(arrayList, arrayValue, arrayColumn, choosePicker){
				let new_arr = arrayList.map(obj => {return obj[arrayColumn]});
				let index = new_arr.indexOf(arrayValue);
				//赋值给picker组件value值
				this.data[choosePicker] = index;
				//赋值给保存数组下标值
				this[choosePicker] = arrayValue;
				
				//如果是城市picker组件，就预加载地区列表
				if(choosePicker == 'city_id'){
					this.GetAreaList(arrayValue);
				}
			},
			/**
			 * 选中房源措施表的id值
			 */
			GetPickerEquipment:function(arrayList, chooseArrayList){
				let new_arr = chooseArrayList.map(obj => {return obj.eid });
				let equipment_new_arr = arrayList.map(obj => {return obj.id });			
				for(let i=0,arr_length=new_arr.length; i<=arr_length; i++){
					let index = equipment_new_arr.indexOf(new_arr[i]);
					console.log('index',index)
					if(index != -1){
						this.house_detail_equipment[index].state = 1;
						this.equipment = {
							'photo_id': this.house_detail_equipment[index].id,
							'show_name': this.house_detail_equipment[index].show_name,
							'system_url': this.house_detail_equipment[index].system_url,
						}
						//压入措施设备栈
						this.equipList.push(this.equipment)
					}
				}
				console.log(this.equipList)
			},
			/**
			 * 组装标签表值
			 */
			GetInputLabel: function(arrayList){
				this.labelList = arrayList;
				this.house_label = arrayList.map(obj => {return obj.show_name});
			},
			/**
			 * @param {Object} 
			 */
			GetAreaList:function(param){
				//获取区域
				new Request('landboos/Create_House/GetCityList').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							city: param
						}
					},
					(res) => {
						this.classifyList = res.data.data
						//获取地区选中id值
						this.GetArrayIndex(this.classifyList, this.district_id, 'areaId', 'area_id');
					}
				)
			},
		},
		onLoad(option) {
			// 获取undate的图片组
			console.log(JSON.parse(option.houseimg))
			console.log(option.house_id)
			this.photo_arr = JSON.parse(option.houseimg)
			this.house_id = option.house_id;
			var that = this;
			//定义请求接口地址
			let url = {
				//获取城市列表接口地址
				'cityUrl': 'landboos/Create_House/GetCityList',
				'PickerUrl': 'landboos/Create_House/GetRentType',
			}
			/**
			 * 定义请求接口
			 * url: 地址
			 * postParam: 传参内容
			 * arrayName: 定义picker数组属性
			 * picker第一个提示语
			 */
			let request  = function(url, postParam, arrayName = '', fristName = ''){
				let paramTypeof = typeof(postParam);
				new Request(url).request(
					() => {
						return 'POST'
					},
					() => {
						return paramTypeof == 'number' ? {city: postParam} : {table: postParam};
					},
					(res) => {
						that[arrayName] = res.data.data;
						if(postParam == 'fa_renthouse_master_equipment'){
							return;
						}
						if(paramTypeof == 'number'){
							that[arrayName].unshift({
								areaId: 0,
								areaName: fristName
							});
						}else{
							that[arrayName].unshift({
								id: 0,
								describes: fristName
							})
						}
						return;
					}
				)
			}
			//获取城市picker数组列表
			request(url.cityUrl, 1935 , 'cityList', '请选择城市');
			//获取热点picker数组列表
			request(url.PickerUrl, 'fa_renthouse_master_hot' , 'hotList', '请选择热点');
			//获取出租类型picker数组列表
			request(url.PickerUrl, 'fa_renthouse_master_renttype' , 'renttypeList', '请选择出租类型');
			//获取最低租期picker数组列表
			request(url.PickerUrl, 'fa_renthouse_master_rentmoney' , 'renttimeList', '请选择最低租期');
			//获取扣租方式picker数组列表
			request(url.PickerUrl, 'fa_renthouse_master_way' , 'rentmoneyList', '请选择扣租方式');
			//获取押金类型picker数组列表
			request(url.PickerUrl, 'fa_renthouse_master_mortgage' , 'deposittypeList', '请选择押金类型');
			//获取房源措施数组列表
			request(url.PickerUrl, 'fa_renthouse_master_equipment', 'house_detail_equipment');
			
			//获取修改房源信息
			new Request('landboos/Edit_House_Info/GetHouseInfo').request(
				() => {
					return 'POST'
				},
				() => {
					return {
						house_id:option.house_id,
						openid: app.globalData.openid
					}
				},
				(res) => {
					//房源名称
					this.inputname = res.data.house_BasicInfo.house_name;
					//房源地址
					this.getaddress = res.data.house_BasicInfo.house_addr;
					//房源联系人名称
					this.inputowner = res.data.house_BasicInfo.house_liaison;
					//房源联系电话
					this.inputphone = res.data.house_BasicInfo.house_phone;
					//房源户型
					this.inputroomtype = res.data.house_BasicInfo.house_type;
					//房源建面
					this.inputarea = res.data.house_BasicInfo.house_area;
					//房源楼层
					this.inputfloor = res.data.house_BasicInfo.house_floor;
					//房源朝向
					this.inputdirection = res.data.house_BasicInfo.house_direction;
					//房源押金
					this.inputrentmoney = res.data.house_BasicInfo.deposit_money;
					//房源租金
					this.inputmoney = res.data.house_BasicInfo.house_money;
					//经度
					this.longitude = res.data.house_BasicInfo.longitude;
					//纬度
					this.latitude = res.data.house_BasicInfo.latitude;
					
					
					setTimeout(()=>{
						//获取城市选中id值
						this.GetArrayIndex(this.cityList, res.data.house_BasicInfo.city_id, 'areaId', 'city_id');
						//地区id
						this.district_id = res.data.house_BasicInfo.district_id;
						//获取出租类型
						this.GetArrayIndex(this.renttypeList, res.data.house_BasicInfo.renttype_id, 'id', 'renttype_id');
						//获取最低租期
						this.GetArrayIndex(this.renttimeList, res.data.house_BasicInfo.rentday_id, 'id', 'rentday_id');
						//扣租方式
						this.GetArrayIndex(this.rentmoneyList, res.data.house_BasicInfo.way_id, 'id', 'way_id');
						//获取热点标签
						this.GetArrayIndex(this.hotList, res.data.house_BasicInfo.hot_id, 'id', 'hot_id');
						//获取押金类型
						this.GetArrayIndex(this.deposittypeList, res.data.house_BasicInfo.mortgage_id, 'id', 'mortgage_id');
						//获取措施表
						this.GetPickerEquipment(this.house_detail_equipment, res.data.house_detail_equipment);
						//获取特色标签
						this.GetInputLabel(res.data.house_detail_label)
					},1000)
				}
			)
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	.content {
		padding-bottom: 250upx;
	}

	/*
		房源详细样式
	*/
	.content_1 {}

	.house_view {
		height: 246upx;
		background-color: #FFFFFF;
		border-radius: 15upx;
		padding: 27upx 24upx;
		display: flex;
		align-items: center;
	}

	.house_img {
		width: 304upx;
		height: 246upx;
		background-color: #8E83C7;
		margin-right: 24upx;
	}

	.house_detail {
		height: 258upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.house_name {
		height: 43upx;
		line-height: 43upx;
		font-size: 32upx;
		color: #333333;
	}

	.house_info {
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
	}

	.house_tips {
		height: 30upx;
		display: flex;
	}

	.tips {
		height: 30upx;
		line-height: 30upx;
		color: #FFFFFF;
		font-size: 20upx;
		background-image: linear-gradient(to right, #87ECC6, #8ED5EE); //颜色渐变效果(从左到右)
		margin-right: 16upx;
		padding: 0upx 20upx;
	}

	.house_money {
		height: 46upx;
		line-height: 46upx;
		font-size: 34upx;
		color: #FFC26D;
	}

	/*
		签约主体信息样式
	*/
	.title_2 {
		height: 88upx;
		background-color: #B3E9DC;
		line-height: 88upx;
		padding-left: 28upx;
		font-size: 30upx;
		color: #FFFFFF;
	}

	.sign_detail {
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0upx 28upx;
		background-color: #FFFFFF;
		position: relative;
	}

	.detail_info {
		height: 37upx;
		line-height: 37upx;
		font-size: 28upx;
		color: #999999;
		text-align: right;
	}

	.detail_icon {
		width: 40upx;
		height: 40upx;
		transform: rotate(180deg);
		position: absolute;
		top: 20upx;
		right: 20upx;
	}

	.detail_son {
		margin: 0upx 30upx;
		padding: 0upx 30upx;
		display: flex;
		flex-direction: column;
	}

	.son_view {
		height: 80upx;
		background-color: #FFFFfF;
		display: flex;
		align-items: center;
	}

	.chooseicon_view {
		height: 30upx;
		width: 30upx;
		margin-right: 30upx;
		border-radius: 30upx;
		display: flex;
		align-items: center;
		border: 5upx solid #5555ff;
	}

	.chooseicon_son {
		height: 20upx;
		width: 20upx;
		border-radius: 20upx;
		margin: 0 auto;
		background-color: #5555ff;
	}

	.son_name {
		height: 40upx;
		line-height: 40upx;
		font-size: 26upx;
		color: #929292;
	}

	/*
		添加房屋特色样式
	*/
	.content_4 {
		margin: 0 30upx;
		margin-top: 40upx;
		position: relative;
	}

	.add_4 {
		height: 20upx;
		font-size: 26upx;
		line-height: 20upx;
		color: #B3E9DC;
		position: absolute;
		top: 0upx;
		right: 0upx;
	}

	/*
		底部提交样式
	*/
	.content_3 {
		position: fixed;
		z-index: 999;
		height: 100upx;
		width: 714upx;
		background-color: #49453A;
		bottom: 0upx;
		left: 0upx;
		padding-left: 40upx;
	}

	.contract_view {
		height: 100upx;
		display: flex;
		align-items: center;
	}

	.contract_icon_view {
		height: 40upx;
		width: 40upx;
		border-radius: 40upx;
		border: 5upx solid #cccccc;
		box-sizing: border-box;
		margin-right: 30upx;
		display: flex;
		align-items: center;
	}

	.contract_icon {
		height: 22upx;
		width: 22upx;
		border-radius: 25upx;
		background-color: #5555ff;
		margin: 0 auto;
	}

	.contract {
		width: 410upx;
		font-size: 26upx;
		color: #FFFFFF;
	}

	.submit {
		height: 100upx;
		width: 240upx;
		background-color: #63D0D5;
		line-height: 100upx;
		text-align: center;
		font-size: 32upx;
		color: #FFFFFF;
		font-weight: bold;
		position: absolute;
		right: 0upx;
		top: 0upx;
	}

	/*
		证件图片上传
	*/
	.upload_view {
		height: 120upx;
		padding-bottom: 28upx;
		background-color: #FFFFFF;
		padding-left: 28upx;
	}

	.uploadimg_view {
		height: 120upx;
		width: 120upx;
		border-radius: 10upx;
		border: 2upx solid #BBBBBB;
		background-color: #e5e5e5;
		display: flex;
		align-items: center;
	}

	.uploadimg {
		width: 48upx;
		height: 48upx;
		margin: 0 auto;
	}

	/*
		配套设施样式
	*/
	.content_10 {
		margin: 0 15upx;
		background-color: #FFFFFF;
		border-radius: 26upx;
		padding: 30upx 25upx 7upx 15upx;
		display: flex;
		flex-direction: column;
	}

	.title_10 {
		height: 37upx;
		font-size: 28upx;
		color: #333333;
		line-height: 37upx;
	}

	.equipment_view {
		margin-top: 20upx;
		display: flex;
		flex-wrap: wrap; //弹性盒元素换行
	}

	.equipment_box {
		height: 250upx;
		width: 194upx;
		background-color: #F0F0F0;
		border-radius: 20upx;
		margin-bottom: 23upx;
		margin-right: 12upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		padding: 10upx;
		position: relative;
	}

	.equipment_img {
		height: 190upx;
		width: 190upx;
		background-color: #a1a1a1;
	}

	.equipment_name {
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #666666;
	}

	.equipment_choose {
		height: 35upx;
		width: 35upx;
		border-radius: 50upx;
		position: absolute;
		top: 10upx;
		right: 10upx;
		background-color: #007AFF;
	}

	/*
		底部按钮样式
	*/
	.content_5 {
		position: fixed;
		z-index: 999;
		right: 30upx;
		bottom: 40upx;
		height: 72upx;
		width: 410upx;
		display: flex;
		align-items: center;
	}

	.back {
		width: 140upx;
		height: 72upx;
		border-radius: 10upx;
		background-color: #999999;
		line-height: 72upx;
		font-size: 28upx;
		color: #FFFFFF;
		text-align: center;
		margin-right: 20upx;
	}

	.save {
		height: 72upx;
		width: 250upx;
		border-radius: 10upx;
		background-color: #63D0D5;
		line-height: 72upx;
		font-size: 28upx;
		color: #FFFFFF;
		text-align: center;
	}
</style>
